<template>
  <div class="chart-container">
    <div id="main" style="width:100%;height:100%"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import "../../../node_modules/echarts/map/js/china"; // 引入中国地图数据
import { getAreaData } from "@/api/article";
export default {
  name: "DragTable",
  filters: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    //this.getList();
    this.onLoad();
  },
  methods: {
    getList() {
      getAreaData().then(response => {
        console.log("////");
        console.log(response);
        console.log("////");
      });
    },
    onLoad() {
      var option = null;
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      option = {
        title: {
          // text: "Distribution of Electricity",
          // subtext: "Fake Data"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          },
        //  formatter: function (params) {
        //             console.log(params)
        //             //let { name, value } = params[0]
        //             let marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#50CCF6;"></span>`
        //             // return `<div> ${name + '<br>' + marker + ' ' + value + unit}</div>`
        //             return `<div> ${ marker + '1111'}</div>`
        //    }
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        legend: {
          // data: ["Electricity"]
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          // prettier-ignore
          data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} W"
          },
          axisPointer: {
            snap: true
          }
        },
        // visualMap: {
        //   show: true,
        //   dimension: 0,
        //   pieces: [
        //     {
        //       lte: 6,
        //       color: "green"
        //     },
        //     {
        //       gt: 6,
        //       lte: 8,
        //       color: "red"
        //     },
        //     {
        //       gt: 8,
        //       lte: 14,
        //       color: "green"
        //     },
        //     {
        //       gt: 14,
        //       lte: 17,
        //       color: "red"
        //     },
        //     {
        //       gt: 17,
        //       color: "green"
        //     }
        //   ]
        // },
        //指示表
        series: [
          {
            // name: "Electricity",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            emphasis: {
              itemStyle: {
                borderWidth: 10
              }
            },
            itemStyle: {
              borderColor: "green",
              borderWidth: 0
            },
            // prettier-ignore
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
            markArea: {
              itemStyle: {
                color: "rgba(255, 173, 177, 0.4)" //背景色
              },
              label: {
                color: "red" //文字颜色
              },
              data: [
                [
                  {
                    name: "Morning Peak",
                    xAxis: "07:30"
                  },
                  {
                    xAxis: "10:00"
                  }
                ],
                [
                  {
                    name: "Evening Peak",
                    xAxis: "17:30"
                  },
                  {
                    xAxis: "21:15"
                  }
                ]
              ]
            }
          }
        ]
      };

      myChart.setOption(option);
      myChart.on("click", params => {
        console.log("999999");
        console.log(params);
      });
    }
  }
};
</script>

<style>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
